<%--
  Created by IntelliJ IDEA.
  User: nan
  Date: 2021/11/20
  Time: 23:05
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
	<head>
		<title>Title</title>
		<link rel="stylesheet" href="../layui/css/layui.css" media="all">
	</head>
	<body>
		<div>
			<ul class="layui-nav layui-bg-blue" lay-filter="" style="padding-left:200px">
				<li class="layui-nav-item layui-this" style=""><a href="">首页</a></li>
				<li class="layui-nav-item"><a href="">购物车</a></li>
				<li class="layui-nav-item"><a href="">我的订单</a></li>
				<!-- <li class="layui-nav-item">
	    <a href="javascript:;">解决方案</a>
	    <dl class="layui-nav-child"> 
	      <dd><a href="">移动模块</a></dd>
	      <dd><a href="">后台模版</a></dd>
	      <dd><a href="">电商平台</a></dd>
	    </dl>
	  </li>
	  <li class="layui-nav-item"><a href="">社区</a></li> -->



				<li class="layui-nav-item">
					<!-- <a href="">控制台<span class="layui-badge">9</span></a> -->
					<a href="javascript:;">未登录</a>
				</li>
				<!-- <li class="layui-nav-item">
					<a href="">个人中心<span class="layui-badge-dot"></span></a>
				</li>
				<li class="layui-nav-item">
					<a href=""><img src="//t.cn/RCzsdCq" class="layui-nav-img">我</a>
					<dl class="layui-nav-child">
						<dd><a href="javascript:;">修改信息</a></dd>
						<dd><a href="javascript:;">安全管理</a></dd>
						<dd><a href="javascript:;">退了</a></dd>
					</dl>
				</li> -->
			</ul>
		</div>
		<p style="margin-left: 200px;margin-top: 20px;"><strong>今日特卖</strong></p>
		<hr />
		<div style="background-color: #0000FF;width: 800px;height: 400px;display: inline-block;
		margin-top: 10px;margin-left:200px">
			<div class="layui-carousel" id="test1">
				<div carousel-item>
					<div><img style="width: 800px;height: 400px;"
							src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fpic18.nipic.com%2F20120113%2F8818567_215030049399_2.jpg&refer=http%3A%2F%2Fpic18.nipic.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1640075647&t=c353efa68e6ebe9e21d926470b56646d" />
					</div>
					<div><img style="width: 800px;height: 400px;"
							src="https://img2.baidu.com/it/u=3240530979,2306942386&fm=26&fmt=auto" /></div>
					<div><img style="width: 800px;height: 400px;"
							src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Finews.gtimg.com%2Fnewsapp_bt%2F0%2F13814623405%2F1000&refer=http%3A%2F%2Finews.gtimg.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1640075783&t=31a9aef5725dfce4fc2eb9f2732cc71e" />
					</div>
					<div><img style="width: 800px;height: 400px;"
							src="https://img1.baidu.com/it/u=283302927,3527818248&fm=253&fmt=auto&app=120&f=JPEG?w=641&h=427" />
					</div>
					<div><img style="width: 800px;height: 400px;"
							src="https://img0.baidu.com/it/u=1063482648,3882157945&fm=26&fmt=auto" /></div>
				</div>
			</div>
		</div>
		<div style="width: 370px;height: 400px;display: inline-block;
		margin-right:100px;float:right">

			<p style="margin-left: 200px;margin-top: 20px;float: right;"><strong>热门评论</strong></p>
			<marquee direction="up" behavior="slide">
				<div style="display: inline-block;width: 300px;height: 40px;padding-top: 20px;float: left;">
					<img style="width: 40px;height: 40px;"
						src="https://img1.baidu.com/it/u=3303981320,1355171730&fm=26&fmt=auto" />
					<div style="display: inline-block;">
						<span style="padding-left: 10px;color: #8D8D8D;">饭是上午吃的，人是晚上走的</span>
					</div>
				</div>

				<div style="display: inline-block;width: 400px;height: 40px;padding-top: 20px;float: left;">
					<img style="width: 40px;height: 40px;"
						src="https://img2.baidu.com/it/u=2237039644,3735368368&fm=26&fmt=auto" />
					<div style="display: inline-block;">
						<span style="padding-left: 10px;color: #8D8D8D;">给我家狗吃了以后，我家狗连夜给我做了三菜一汤</span>
					</div>
				</div>


				<div style="display: inline-block;width: 300px;height: 40px;padding-top: 20px;float: left;">
					<img style="width: 40px;height: 40px;"
						src="https://img2.baidu.com/it/u=1960058469,2576593478&fm=26&fmt=auto" />
					<div style="display: inline-block;">
						<span style="padding-left: 10px;color: #8D8D8D;">但凡有颗花生米，我也不至于吃这饭</span>
					</div>
				</div>


				<div style="display: inline-block;width: 300px;height: 40px;padding-top: 20px;float: left;">
					<img style="width: 40px;height: 40px;"
						src="https://img2.baidu.com/it/u=304846655,1860504905&fm=26&fmt=auto" />
					<div style="display: inline-block;">
						<span style="padding-left: 10px;color: #8D8D8D;">太好吃了，就是没筷子</span>
					</div>
				</div>


			</marquee>


		</div>

		<p style="margin-left: 200px;margin-top: 20px;"><strong>热门菜品</strong>
			<strong style="padding-left: 80%;"><a href="http://localhost/front/hotsfoodmore.jsp" target="_blank"><em><u>更多</u></em></a></strong>
		</p>
		<hr />
		<div style="width: 1200px;height: 300px;display: inline-block;margin-left: 200px;" class="hotsfood">

			
		</div>

		<p style="margin-left: 200px;margin-top: 20px;"><strong>厨师推荐</strong>
			<strong style="padding-left: 80%;"><a href="http://localhost/front/cookrecommentfoodmore.jsp" target="_blank"><em><u>更多</u></em></a></strong>
		</p>
		<hr />

		<div style="width: 1200px;height: 300px;display: inline-block;margin-left: 200px;"
			class="cookrecommentfoods">
			

		</div>


		<script src="../js/jquery-3.4.1.js" charset="utf-8"></script>
		<script src="../layui/layui.js"></script>
		<script src="../js/toastr.min.js"></script>

		<script>
			$(function() {
				// 获取热门菜品
				$.ajax({
					url: "http://localhost/front/gethotsfoods",
					type: "post",
					success: function(res) {
						var data = $.parseJSON(res);
						// console.log(data);
						if (data.code == 0) {
							var hotsfood = data.data;
							// 清空热门数据
							$(".hotsfood").empty();
							for (var i = 0; i < hotsfood.length; i++) {
								$(".hotsfood").append(
									'<div style="width:200px;height: 250px;display: inline-block;float: left;margin-left: 30px;' +
									'margin-top:20px;border: solid 1px beige;">' +
									'<img src="' + hotsfood[i].picture +
									'" style="width: 200px;height: 150px;margin-top:20px"/>' +
									'<p style="margin-top:20px">' +
									'<strong style="font-size: 20px;">' + hotsfood[i].foodname +
									'</strong>' +
									'<span>' + hotsfood[i].price + '.00元</span>' +
									'</p>' +
									'</div>');
							}


						} else {
							toastr.error(data.msg);
						}

					}
				});

				// 获取厨师推荐
				$.ajax({
					url: "http://localhost/front/cookrecommentfoods",
					type: "post",
					success: function(res) {
						var data = $.parseJSON(res);
						// console.log(data);
						if (data.code == 0) {
							var cookrecommentfoods = data.data;
							// 清空热门数据
							$(".cookrecommentfoods").empty();
							for (var i = 0; i < cookrecommentfoods.length; i++) {
								$(".cookrecommentfoods").append(
									'<div style="width:200px;height: 250px;display: inline-block;float: left;margin-left: 30px;' +
									'margin-top:20px;border: solid 1px beige;">' +
									'<img src="' + cookrecommentfoods[i].picture +
									'" style="width: 200px;height: 150px;margin-top:20px"/>' +
									'<p style="margin-top:20px">' +
									'<strong style="font-size: 20px;">' + cookrecommentfoods[i].foodname +
									'</strong>' +
									'<span>' + cookrecommentfoods[i].price + '.00元</span>' +
									'</p>' +
									'</div>');
							}


						} else {
							toastr.error(data.msg);
						}
					}
				});



				toastr.options = {
					closeButton: false, //是否显示关闭按钮（提示框右上角关闭按钮）。
					debug: false, //是否为调试。
					progressBar: false, //是否显示进度条（设置关闭的超时时间进度条）
					positionClass: "toast-top-center", //消息框在页面显示的位置
					onclick: null, //点击消息框自定义事件 
					showDuration: "300", //显示动作时间 
					hideDuration: "500", //隐藏动作时间
					timeOut: "1000", //自动关闭超时时间 
					extendedTimeOut: "1000",
					showEasing: "swing",
					hideEasing: "linear",
					showMethod: "fadeIn", //显示的方式，和jquery相同
					hideMethod: "fadeOut" //隐藏的方式，和jquery相同
					//等其他参数
				};

			});
		</script>



		<script>
			layui.use('carousel', function() {
				var carousel = layui.carousel;
				//建造实例
				carousel.render({
					elem: '#test1',
					width: '800px' //设置容器宽度
						,
					height: '400px' //设置容器高度
					// , full:'true' //是否全屏轮播,默认false
					// , arrow: 'always' //始终显示箭头和点击按钮
					// ,anim: 'updown' //切换动画方式，可从各个方向滚动
				});
			});
		</script>


		<script>
			//注意：导航 依赖 element 模块，否则无法进行功能性操作
			layui.use('element', function() {
				var element = layui.element;

				//…
			});
		</script>
	</body>
</html>
